<template>
  <div class="approval-box">
    <div class="cardbox filter-box">
      <el-form label-width="80px" :model="formLabelAlign">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="店铺名称">
              <el-input
                v-model="formLabelAlign.shopName"
                placeholder="店铺名称"
                class="item"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核状态">
              <el-select
                v-model="formLabelAlign.approveStatus"
                placeholder="审核状态"
                class="item"
              >
                <el-option
                  v-for="(item, index) in statusOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请时间">
              <!-- <el-input
                v-model="formLabelAlign.createTime"
                class="item"
                placeholder="申请时间"
              ></el-input> -->
              <el-date-picker
      v-model="formLabelAlign.createTime"
      type="date"
        class="item"
      format='yyyy-MM-dd'
      value-format='yyyy-MM-dd'
      placeholder="选择日期">
    </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="16">
            <el-form-item>
              <div class="item" style="text-align: right">
                <el-button type="primary" icon="el-icon-search" size="small"
                @click="searchHandle"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh-right"
                  size="small"
                  @click="resetHandle"
                  >重置</el-button
                >
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="cardbox">
      <el-table :data="tableData" style="width: 100%" :loading="loading">
        <template  v-for="(item, index) in approvalColumn">
        <el-table-column
          v-if="item.key!='approveStatus'"
          :label="item.title"
          :prop="item.key"
          :key="index"
          
        >
        </el-table-column>

         <el-table-column
          v-if="item.key =='approveStatus'"
          :label="item.title"
          :prop="item.key"
          :key="index"
         
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.approveStatus == 'PASS'?'success': scope.row.approveStatus == 'AWAIT'? 'warning': 'danger'">{{scope.row.approveStatus == 'PASS'?'通过': scope.row.approveStatus == 'AWAIT'? '待审核': '拒绝'}}</el-tag>
          </template>
        </el-table-column>
        </template>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)"
            :disabled="scope.row.approveStatus == 'PASS'?true:false"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
          <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formLabelAlign.currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="formLabelAlign.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
        
      </el-pagination>
    </div>
    </div>

    <!--modal-->
    <Modal :showModal='showModal' :modalContent='modalContent' v-if="modalContent" @closeModalHandle='closeModalHandle' @passHandle='passHandle'/>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Form } from "element-ui";
import { approvalColumn } from "@/static/columns/approvalColumns";
import { formItem, optionItem } from "@/types/index";
import moneyApi from "@/APIService/api/backstage/money";
import Modal from './Comps/modal'

@Component({
  name: "approval",
  components: {
    Modal
  },
})
export default class extends Vue {
  private approvalColumn = approvalColumn;
  private loading: boolean = false;
  private total: number = 0;
  private showModal : boolean = false
  private modalContent = ''

  private formLabelAlign: formItem = {
    name: undefined,
    approveStatus: undefined,
    createTime: undefined,
    type: "WITHDRAWAL",
    currentPage: 1,
    pageSize: 10,
  };
  private tableData = [];

  statusOptions: optionItem[] = [
    {
      label: "待审核",
      value: "AWAIT",
    },
    {
      label: "通过",
      value: "PASS",
    },
    {
      label: "拒绝",
      value: "REFUSE",
    },
  ];

  private mounted() {
    this.getInfo();
  }

  private searchHandle () {
    console.log(this.formLabelAlign)
    this.getInfo()

  }
  private handleSizeChange(e) {
    console.log('handleSizeChange'+e);
    this.formLabelAlign.pageSize = e
    this.getInfo()
  }
  private handleCurrentChange(e) {
    console.log('handleCurrentChange'+e);
    this.formLabelAlign.currentPage = e
    this.getInfo()
  }

  private async getInfo() {
    this.loading = true;
    let res = await moneyApi.getFinanceData(this.formLabelAlign);
    if (res.code === 20000) {
      this.loading = false;
      this.tableData = res.data.records;
      this.total = res.data.total;
    }else{
      this.$message.error(res.msg)
    }
  }

  private resetHandle() {
    this.formLabelAlign = {
      name: undefined,
      approveStatus: undefined,
      createTime: undefined,
      currentPage: 1,
      pageSize: 10,
      type: "WITHDRAWAL",
    };
    this.getInfo()
  }
  private handleClick(e: any) {
    // console.log(e);
    this.showModal = true
    this.modalContent = e

  }
  // 子组件传递值
  private closeModalHandle(payload:boolean){
   
    this.showModal = payload
  }

  private async passHandle(payload:any) {
    console.log(payload)

      this.showModal = false
      // 请求审核
      let res = await moneyApi.platformApproval(payload)
      if (res.code === 20000) {
        this.$message.success('审核成功')
        //更新list
        this.getInfo()

      }else{
        this.$message.error(res.msg)
      }
    
  }
}
</script>


<style lang="less" scoped>
.item {
  width: 80%;
}
</style>

